<!--
 * @Author: anxia.ack anchenkai@come-future.com
 * @Date: 2025-03-22 15:59:47
 * @LastEditors: anxia.ack anchenkai@come-future.com
 * @LastEditTime: 2025-04-11 10:23:14
 * @FilePath: /free-learning-front/src/App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: anxia.ack anchenkai@come-future.com
 * @Date: 2025-03-22 15:59:47
 * @LastEditors: anxia.ack anchenkai@come-future.com
 * @LastEditTime: 2025-04-11 10:14:38
 * @FilePath: /free-learning-front/src/App.vue
 * @Description: App根组件
-->
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Navbar from './components/Navbar.vue';
import Footer from './components/Footer.vue';
import BackToTop from './components/BackToTop.vue';

// 导航栏高度，用于主内容区域的padding-top
const navbarHeight = ref(0);

onMounted(() => {
  // 设置html的lang属性为中文
  const htmlEl = document.getElementById('htmlRoot');
  if (htmlEl) {
    htmlEl.lang = 'zh-CN';
  }

  // 获取导航栏元素
  const updateNavbarHeight = () => {
    const navbar = document.querySelector('.navbar');
    if (navbar) {
      // 设置导航栏高度
      navbarHeight.value = navbar.clientHeight;
    }
  };
  
  // 初始设置
  updateNavbarHeight();
  
  // 监听窗口大小变化，动态调整导航栏高度
  window.addEventListener('resize', updateNavbarHeight);
  
  // 添加全局图片错误处理
  document.addEventListener('error', function(e) {
    if ((e.target as HTMLElement).tagName === 'IMG') {
      // 如果图片加载失败，使用占位图
      // img.src = 'https://via.placeholder.com/300x200/3498db/ffffff?text=教育平台';
    }
  }, true);
  
  // 组件卸载时移除监听器
  return () => {
    window.removeEventListener('resize', updateNavbarHeight);
  };
});
</script>

<template>
  <div class="app">
    <!-- 固定的导航栏 -->
    <Navbar />
    
    <!-- 主要内容区域 - 只有这部分随路由变化 -->
    <main :style="{ paddingTop: `${navbarHeight}px` }">
      <router-view />
    </main>
    
    <!-- 固定的页脚 -->
    <Footer />
    
    <!-- 回到顶部按钮 -->
    <BackToTop />
  </div>
</template>

<style>
/* 全局样式可以在这里定义 */
.app {
  width: 100%;
  margin: 0;
  padding: 0;
}

body, html {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

main {
  width: 100%;
  min-height: calc(100vh - 60px); /* 减去导航栏高度 */
  padding-top: 60px; /* 导航栏高度 */
}

* {
  box-sizing: border-box;
}

/* 预加载一个常用的占位图 */
.img-placeholder {
  /* background-image: url('https://via.placeholder.com/300x200/3498db/ffffff?text=教育平台'); */
  background-size: cover;
  background-position: center;
}
</style>
